<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>微博</title>
    <link rel="stylesheet" href="./style/weibo.css">
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
    <script src="./node_modules/axios/dist/axios.min.js"></script>
</head>

<body>
    <div class="jyArea">

    </div>
</body>
<script type="text/babel">
    const request = axios.create({
        // baseURl: "http://192.168.12.31:8081"
    })
    // 添加响应拦截器
    request.interceptors.response.use((res) => {
        const { ok, msg } = res.data
        if (ok === -1) {
            alert(msg)
            return new Promise(() => { })
        }
        return res.data
    })

    class App extends React.Component {
        // 通过ref获取表单内容
        content = React.createRef()
        state = {
            contentList:[],// 保存微博列表
        }

        async addWeibo() {
            console.log(this.content)
            const content = this.content.current.value
            // 判断表单内容
            if (this.content.current.value === '') {
                alert('请输入内容')
                return
            }
            // 发送添加微博请求
            const result = await request.post('http://localhost:8081/weibo', {
                content
            })
            this.content.current.value = null;
            this.getWeibo()
        }

        async getWeibo() {
            const {contentList} = await request.get("http://localhost:8081/weibo",{
                params:{
                    pageNo:1,
                    pageSize:10
                }
            })
            this.setState({
                contentList
            })
        }
        componentDidMount(){
            this.getWeibo();
        }



        render() {
            console.log(this.state)
            return (
                <>
                    <div className="takeComment">
                        <textarea ref={this.content} name="textarea" className="takeTextField" id="tijiaoText"></textarea>
                        <div className="takeSbmComment">
                            <input onClick={this.addWeibo.bind(this)} type="button" className="inputs" value="" />
                        </div>
                    </div>


                    <div className="commentOn">
                        <div className="noContent" style={{ display: this.state.contentList.length === 0 ? "block" : "none" }}>暂无留言</div>
                        <div className="messList">
                            {
                                this.state.contentList.map((item) => (
                                    <div key={item._id} className="reply">
                                        <p className="replyContent">{item.content}</p>
                                        <p className="operation">
                                            <span className="replyTime">{item.addTime}</span>
                                            <span className="handle">
                                                <a href="" className="top">{item.topNum}</a>
                                                <a href="" className="down_icon">{item.downNum}</a>
                                                <a href="" className="cut">删除</a>
                                            </span>
                                        </p>
                                    </div>
                                ))


                            }
                        </div>
                        <div className="page">
                            <a href="" className="active">1</a>
                            <a href="">2</a>
                            <a href="">3</a>
                        </div>
                    </div>
                </>
            )
        }
    }
    ReactDOM.createRoot(document.querySelector(".jyArea")).render(<App />)
</script>

</html>